<!-- 用户资料更新界面 -->
<template>
  <div id="update">
    <p class="title">个人设置</p>

    <el-tabs type="border-card">
      <el-tab-pane label="基本设置">
        <UpdateBase></UpdateBase>
      </el-tab-pane>
      <el-tab-pane label="绑定设置">
        <UpdateBind></UpdateBind>
      </el-tab-pane>
      <el-tab-pane label="隐私设置">
        <UpdatePrivacy></UpdatePrivacy>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import UpdateBase from "../components/UpdateBase.vue";
import UpdateBind from "../components/UpdateBind.vue";
import UpdatePrivacy from "../components/UpdatePrivacy.vue";

export default {
  name: "Update",

  beforeMount() {
    let userId = this.$cookies.get('defaultUserId');
    this.user = this.$cookies.get(userId); // 初始化 用户对象

    // 检测用户是否登录
    if(this.user.isLogin) {
      this.$store.state.isLogin = true;
    } else {
      // 如果用户未登录，则跳转到首页
      this.$router.push('/home');
    }
  },

  components: {
    UpdateBase, // 基本设置界面
    UpdateBind,  // 绑定设置
    UpdatePrivacy, // 隐私界面
  }
}
</script>

<style lang="less" scoped>
#update {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 40px;
  width: 1060px;
  height: 800px;
  //background-color: lightgrey;
  overflow: hidden;
  //box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.title {
  margin-bottom: 10px;
  font-size: 24px;
}
</style>